<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-21 11:21:44
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>
<script>

// 2. 导入图表构造函数
import { Pie } from '@antv/g2plot';
import {get} from '../../../utils/request'
export default {
  data(){
      return{
        dd:[]
      }
    },
  async mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
   
      await this.loadData();
      this.initChart();
    
  },
  methods:{
    // 3. 初始化图表
    async loadData(){
      let url ="/dashboard/queryDeviceOnlineNumber"
      let resp=await get(url);
      this.dd=resp.data;
    },
    initChart(){
      const data = this.dd;
      const piePlot = new Pie(this.$refs.left2_container, {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        legend:false,
        label: {
          //type: 'outer',
          style:{
            fontSize: 16,
            type: 'outer',
            fill:'#fff'
          },
        },
        
        interactions: [{ type: 'element-active' }],
      });

      piePlot.render();
    }
  }
}
</script>